<script setup>
import { ref, toRef, reactive } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import { useDataStore } from '@/stores/user.js'

// 侧边栏数据
const menu = ref([
  {
    name: '轮播图管理',
    index: '/home/bannerList',
    icon: 'PictureFilled',
    children: [
      {
        name: '轮播图列表',
        index: '/home/bannerList'
      },
    ]
  },
  {
    name: '图表管理',
    icon: 'DataLine',
    children: [
      {
        name: '饼状图',
        index: '/home/pie'
      },
      {
        name: '柱状图',
        index: '/home/bar'
      },
      {
        name: '折线图',
        index: '/home/line'
      }
    ]
  },
  {
    name: '统计管理',
    icon: 'UserFilled',
    index: '/home/statistics',
    children: [
      {
        name: '总数量展示',
        index: '/home/statistics'
      }
    ]
  },
  {
    name: '地址管理',
    index: '/home/address',
    icon: 'Location',
    children: [
      {
        name: '地址列表',
        index: '/home/addresslist'
      },
    ]
  },
  {
    name: '管理员管理',
    index: '/home/adminma',
    icon: 'Pointer',
    children: [
      {
        name: '管理员设置',
        index: '/home/adminma'
      },
    ]
  },
  {
    name: '购物车',
    index: '/home/klf_car',
    icon: 'ShoppingCart' ,
    children: [
      {
        name: '购物车',
        index: '/home/klf_car'
      }
    ]
  },
  {
    name: '订单',
    index: '/home/order',
    icon: 'GoodsFilled',
    children: [
      {
        name: '修改订单',
        index: '/home/modifyorder'
      }
    ]
  },
  {
    name: '用户',
    index: '/home/user',
    icon: 'Avatar',
    children: [
      {
        name: '用户列表数据',
        index: '/home/user'
      }
    ]
  },
  {

    name: 'pro商品类',
    icon: 'Goods',
    
    index: '/home/flashkill',

    children: [
      {
        name: '商品列表',
        index: '/home/flashkill',
      },
      {
        name: '商品秒杀',
        index: '/home/second',
      }
    ]
  }
])
// 侧边栏展示
const isCollapse = ref(false)

// 用户信息
const userInfo = useDataStore()
const user = reactive({
  username: toRef(userInfo.userData.adminname)
})

// 显示隐藏侧边栏
function change() {
  // console.log(isCollapse.value)
  isCollapse.value = !isCollapse.value
}

const router = useRouter()
const breadcrumbList = ref([])

// menu导航点击文字数据
function handleClick(pName, cName) {
  breadcrumbList.value = [pName, cName]
}

function toIndex() {
  router.push({ path: '/home' })
  breadcrumbList.value = []

  setTimeout(() => {
    history.go(0)
  }, 200)
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="aside">
        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :label="isCollapse" @click="change">expand</el-radio-button>
        </el-radio-group> -->
        <el-menu :collapse="isCollapse" active-text-color="#ffd04b" background-color="#545c64"
          class="el-menu-vertical-demo" default-active="/home" text-color="#fff" router>
          <el-menu-item>
            <img class="logo" v-if="!isCollapse" src="http://1000phone.com/img/logo.f40a184b.png" />
          </el-menu-item>
          <el-menu-item index="/home">
            <el-icon :size="20">
              <!-- <HomeFilled /> -->
              <component is="HomeFilled"></component>
            </el-icon>
            <span @click="breadcrumbList = []">首页</span>
          </el-menu-item>
          <el-sub-menu v-for="item in menu" :index="item.index">
            <template #title>
              <el-icon :size="20">
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group v-for="ite in item.children">
              <el-menu-item :index="ite.index" @click="handleClick(item.name, ite.name)">{{ ite.name }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <!-- <el-sub-menu index="/home/bannerList">
            <template #title>
              <el-icon :size="20">
                <component is="PictureFilled"></component>
              </el-icon>
              <span>轮播图管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/bannerList">轮播图列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="/home/chart">
            <template #title>
              <el-icon :size="20">
                <component is="DataLine"></component>
              </el-icon>
              <span>图表管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/pie">饼状图</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/home/bar">柱状图</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/home/line">折线图</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu> -->
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <button class="btn" @click="change">
            <!-- <Fold />
            <Expand /> -->
            <component :is="!isCollapse ? 'Fold' : 'Expand'"></component>
          </button>
          <div>
            <!-- <el-icon>
              <User />
            </el-icon>
           -->

            欢迎：{{ user.username }}
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <User />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click="toIndex">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumbList">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped lang="scss">
@import './css/app.scss';
</style>


<!-- <template>
  <div>
    {{ counter.count }}
    <input type="text" @keydown.enter="add" v-model="msg">
    <ul>
      <li v-for="item in dataStore.filterArr">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup>
// 数字增加修改
import { countFn } from './js/count.js'
const { counter } = countFn()

// todolist, 待办事项
import { msgFn } from './js/msg.js'
const { msg, add, dataStore } = msgFn()
</script > -->